<template>
    <div class="container" :style="{ 'height': curHeight + 'px' }">
        <!-- 头部 -->
        <centerHeader v-on:activeChanged="updateActive" />

        <!-- 地震速报 -->
        <div v-show="active === 0" class="right-bar" :class="active === 0 ? 'fromRight' : ''"
            :style="{ right: rightbarRight + '%' }">
            <div class="right-bar-info">
                <lastEQR1 :lastCatalogDataList="lastCatalogDataList"></lastEQR1>
                <eqList1 :lastCatalogDataList="lastCatalogDataList"></eqList1>
            </div>
        </div>
        <!-- 地震预警 -->
        <div v-show="active === 1" class="right-bar" :class="active === 1 ? 'fromRight' : ''"
            :style="{ right: rightbarRight + '%' }">
            <div class="right-bar-info">
                <lastEEW1 :lastEEWDataDict="lastEEWDataDict"></lastEEW1>
                <eewDetail1 :lastEEWDataList="lastEEWDataList"></eewDetail1>
            </div>
        </div>
        <!-- 地震统计 -->
        <div v-show="active === 2" class="right-bar" :class="active === 2 ? 'fromRight' : ''"
            :style="{ right: rightbarRight + '%' }">
            <div class="right-bar-info">
                <eqcountContent1 :lastTotalDataDict="lastTotalDataDict"></eqcountContent1>
                <eqcountContent2 :lastTotalDataDict="lastTotalDataDict"></eqcountContent2>
                <eqcountContent3 ref="count_child"></eqcountContent3>
            </div>
        </div>

        <div id="iframe-map">
            <mapEcharts ref="map_child"></mapEcharts>
        </div>
    </div>
</template>
<script>
import { io } from 'socket.io-client'
import mapUtil from '@/common/js/mapUtil'
import timeUtil from '@/common/js/timeUtil'
import earthquakeUtil from '@/common/js/earthquakeUtil'

import centerHeader from '../../components/header/centerHeader.vue'
//import centerMenu from '../../components/menu/centerMenu.vue'
import bus from '../../utils'
import lastEQR1 from '../../components/subcontent/earthquake/lastEQR1.vue'
import eqList1 from '../../components/subcontent/earthquake/eqList1.vue'
import lastEEW1 from '../../components/subcontent/ewarn/lastEEW1.vue'
import eewDetail1 from '../../components/subcontent/ewarn/eewDetail1.vue'
import mapEcharts from '../../components/map/mapEcharts.vue'

import eqcountContent1 from '../../components/subcontent/eqcount/eqcountContent1.vue'
import eqcountContent2 from '../../components/subcontent/eqcount/eqcountContent2.vue'
import eqcountContent3 from '../../components/subcontent/eqcount/eqcountContent3.vue'
export default {
    components: {
        centerHeader,
        lastEQR1,
        eqList1,
        lastEEW1,
        eewDetail1,
        mapEcharts,
        eqcountContent1,
        eqcountContent2,
        eqcountContent3,
    },
    data() {
        return {
            // 屏幕高度
            curHeight: document.documentElement.clientHeight,
            curWidth: document.documentElement.clientWidth, // 屏幕尺寸
            //screenWidth: document.body.clientWidth, // 屏幕尺寸
            //screenHeight: document.body.clientHeight, 
            locCenter: { "city": "珠海市", "address": "珠海市香洲区", "coordinates": [113.55, 22.25] },
            tip: '2222',
            active: 0,
            toChilWeather: '下雨',
            rightbarRight: -0,
            lastCatalogDataList: [], //传递给左侧两个菜单的数组
            lastCatalogDataRawList: [],//原始的EQR列表

            lastEEWDataList: [], //传递给左侧两个菜单的数组
            lastEEWDataRawList: [],//原始的EEW列表
            lastEEWDataDict: {}, //最新的地震预警

            lastEqTotalCountDataRawList: {}, //原始最新的地震统计数据
            lastEqrTotalCountDataDict: {},  //最新的地震速报统计数据
            lastEewTotalCountDataDict: {},  //最新的地震预警统计数据
            lastTotalDataDict: {}, //最新的统计数据

            lastWeatherDataRawList: [], //最新天气数据数组
            lastWeatherDataDict: {}, //最新天气数据对象

            s_wave_speed: 3.51, //S波速度
            p_wave_speed: 5.77, //P波速度

            socket: null, //WebSocket
            lockReconnect: false,

        }
    },
    created() {
        // if(this.screenWidth < 1920){
        //     this.tip = '需在分辨率大于1920的浏览器浏览'
        // } else {
        //     
        // }
        //this.$router.push({path:"/home"}); 
    },
    methods: {
        updateActive(e) {   //声明这个函数
            this.active = e;
            //console.log(this.active)
            //this.toChilWeather = e
        },
        fetchLastEQRData() {
            //下载最新地震速报数据
            
            this.$axios.get("./static/data/eqr_last_data.json").then(response => {
                //console.log(response.data)
                this.lastCatalogDataRawList = response.data
            console.log(this.lastCatalogDataRawList)
            this.updateLastEQRData()
            })
        },
        fetchLastEEWData() {
            //下载最新地震预警数据
            this.$axios.get("./static/data/eew_last_data.json").then(response => {
                //console.log(response.data)
                this.lastEEWDataRawList = response.data
                this.updateLastEEWData()
            })
        },
        fetchCountData() {
            //下载最新地震统计数据
            this.$axios.get("./static/data/eq_total_count_data.json").then(response => {
                //console.log(response.data)
                this.lastEqTotalCountDataRawList = response.data
                //console.log(this.lastEqTotalCountDataRawList)
                this.updateLastEqTotalCountData()
            })
        },
        fetchWeatherData() {
            //下载天气数据
            this.$axios.get("./static/data/city_weather_offline.json").then(response => {
                //console.log(response.data)
                this.lastWeatherDataRawList = response.data
                //console.log(this.lastEqTotalCountDataRawList)
                this.updateLastWeatherData()
            })

        },
        updateLastWeatherData() {
            //更新天气数据
            this.lastWeatherDataDict['city'] = this.locCenter['city']
            this.lastWeatherDataDict['address'] = this.locCenter['address']
            this.lastWeatherDataDict['temp'] = ""
            this.lastWeatherDataDict['text_day'] = ""
            if (this.lastWeatherDataRawList.length > 0) {
                var lastDayWeather = this.lastWeatherDataRawList[0]["result"]["now"]
                this.lastWeatherDataDict['temp'] = lastDayWeather['temp'] + "°C"
                this.lastWeatherDataDict['text_day'] = lastDayWeather['text']
            }

        },
        updateLastEqTotalCountData() {
            //更新最新统计数据
            this.lastEqrTotalCountDataDict = this.lastEqTotalCountDataRawList["eqr"]
            this.lastEewTotalCountDataDict = this.lastEqTotalCountDataRawList["eew"]
            this.lastTotalDataDict = this.lastEqTotalCountDataRawList["total"]
            //主动向地图组件传输数据
            this.$refs.count_child.updagteCountData(this.lastEqTotalCountDataRawList)

        },
        updateLastEEWData() {
            //更新最新地震预警数据
            var eew_list = []
            //console.log(this.news)
            for (var key in this.lastEEWDataRawList) {
                //console.log(key)
                var eew_event = this.lastEEWDataRawList[key]
                //console.log(eew_event)
                var cur_idnex = 1
                for (var key1 in eew_event) {
                    var eew_sub_event = eew_event[key1]
                    var cur_sub_eew = eew_sub_event["data"]
                    //console.log(cur_sub_eew)
                    var TitleMsg = "[第" + cur_idnex + "报]" + cur_sub_eew["3"]
                    var cur_sub_eew_dict = {
                        "MsgID": cur_sub_eew["1"],
                        "SendTime": cur_sub_eew["3"],
                        "TitleMsg": TitleMsg,

                        "warnLevel": cur_sub_eew['11'],
                        "Oritime": cur_sub_eew['12'],
                        "Locname": cur_sub_eew['13'],
                        "EpiLon": cur_sub_eew['14'],
                        "EpiLat": cur_sub_eew['15'],
                        "Magnitude": cur_sub_eew['17'],
                        "EpiIntensity": cur_sub_eew['18'],
                    }
                    eew_list.push(cur_sub_eew_dict)
                    cur_idnex += 1
                }
            }
            this.lastEEWDataList = eew_list
            console.log(this.lastEEWDataList);
            this.calcLastEEWData();

        },
        calcLastEEWData() {
            //计算最新地震预警的预警参数
            if (this.lastEEWDataList.length > 0) {
                this.lastEEWDataDict = JSON.parse(JSON.stringify(this.lastEEWDataList[this.lastEEWDataList.length - 1]));
                var SendTime = this.lastEEWDataDict["SendTime"];
                var SendTimeSps = SendTime.split(".");
                if (SendTimeSps.length > 0) {
                    this.lastEEWDataDict["SendTime"] = SendTimeSps[0];
                }
                var Oritime = this.lastEEWDataDict["Oritime"];
                var OritimeSps = Oritime.split(".");
                if (OritimeSps.length > 0) {
                    this.lastEEWDataDict["Oritime"] = OritimeSps[0];
                }
                var eqLocStr = "";
                if (this.lastEEWDataDict["EpiLon"] > 0) {
                    eqLocStr = "E" + this.lastEEWDataDict["EpiLon"] + ", "
                } else {
                    eqLocStr = "W" + this.lastEEWDataDict["EpiLon"] + ", "
                }
                if (this.lastEEWDataDict["EpiLat"] > 0) {
                    eqLocStr += "N" + this.lastEEWDataDict["EpiLat"]
                } else {
                    eqLocStr += "S" + this.lastEEWDataDict["EpiLat"]
                }
                this.lastEEWDataDict["EqLocStr"] = eqLocStr;

                this.lastEEWDataDict['distance'] = mapUtil.GetDistance(this.locCenter['coordinates'][1], this.locCenter['coordinates'][0], this.lastEEWDataDict["EpiLat"], this.lastEEWDataDict["EpiLon"])
                this.lastEEWDataDict['muils_eew_standard'] = timeUtil.compareTime(this.lastEEWDataDict["Oritime"], this.lastEEWDataDict["SendTime"])
                this.lastEEWDataDict["eew_time"] = Math.round(this.lastEEWDataDict['distance'] / this.s_wave_speed) - this.lastEEWDataDict['muils_eew_standard']
                this.lastEEWDataDict["local_intensity"] = earthquakeUtil.calcIntensity(this.lastEEWDataDict["EpiIntensity"], this.lastEEWDataDict['distance'])

                var curLastOneEEWDataMap = []
                curLastOneEEWDataMap.push({
                    name: this.lastEEWDataDict["Locname"],
                    value: [this.lastEEWDataDict["EpiLon"], this.lastEEWDataDict["EpiLat"], 150]
                })
                //主动向地图组件传输数据
                this.$refs.map_child.updateEEWData(curLastOneEEWDataMap)
            }

        },
        updateLastEQRData() {
            //更新最新地震速报数据
            var curLastCatalogDataList = []
            for (var key in this.lastCatalogDataRawList) {
                var eq = this.lastCatalogDataRawList[key]["data"];
                //console.log(eq)
                var eq_dict = {}
                eq_dict['cata_id'] = eq[1]
                eq_dict['o_time'] = eq[9]
                eq_dict['lat'] = eq[5]
                eq_dict['lon'] = eq[6]
                eq_dict['m'] = eq[8]
                eq_dict['loc_name'] = eq[4]
                eq_dict['depth'] = eq[7]
                eq_dict['distance'] = mapUtil.GetDistance(this.locCenter['coordinates'][1], this.locCenter['coordinates'][0], eq_dict['lat'], eq_dict['lon'])
                curLastCatalogDataList.push(eq_dict)
            }
            this.lastCatalogDataList = curLastCatalogDataList

            //构建给地图组件的数据
            var curLastCatalogDataMapList = []
            var curLastOneCatalogDataMap = []
            for (var i = 0; i < this.lastCatalogDataList.length; i++) {
                var eq = this.lastCatalogDataList[i]
                if (i == this.lastCatalogDataList.length - 1) {
                    curLastOneCatalogDataMap.push({
                        name: eq["loc_name"],
                        value: [parseFloat(eq["lon"]), parseFloat(eq["lat"]), 150]
                    })
                }

                var m_size = 100;
                if (eq["m"] < 3) {
                    m_size = 100
                } else if (eq["m"] >= 3 && eq["m"] < 4) {
                    m_size = 120
                } else if (eq["m"] >= 4 && eq["m"] < 5) {
                    m_size = 150
                } else if (eq["m"] >= 5) {
                    m_size = 180
                }
                curLastCatalogDataMapList.push({
                    name: eq["loc_name"],
                    value: [parseFloat(eq["lon"]), parseFloat(eq["lat"]), m_size]
                })
            }
            //主动向地图组件传输数据
            this.$refs.map_child.updateEqrData(curLastOneCatalogDataMap, curLastCatalogDataMapList)
            //主动向地图组件传输数据
            this.$refs.map_child.refreshData(0)
        },

    },
    mounted() {
        bus.off('changeActive')
        bus.on('changeActive', val => {
            this.toChilWeather = val    //此处为复制操作，也可在里面执行相应的方法
        })

        var that = this;
        setTimeout(function () {
            that.fetchLastEQRData()
            that.fetchLastEEWData()
            that.fetchCountData()
        }, 3000);

    },
    beforeUnmount() {

    },
}
</script>
<style>
body {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --light: #f8f9fa;
    --dark: #343a40;
    --muted: #6c757d;
    --white: #fff;
    --borderColor: #dee2e6;
    --lightmuted: #B2B2B2;
    --gray: #f5f5f5;
    --darkgray: #999999;
    --red: #ff4200;
    --orange: #ff611e;
    margin: 0;
    overflow-y: hidden;
    overflow-x: hidden;
}

/* 右边样式 */
.right-bar {
    width: 700px;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../../assets/img/right-cover.png);
    z-index: 5;
}

/* 右边样式 */
.right-bar1 {
    width: 580px;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../../assets/img/right-cover.png);
    z-index: 5;
}

.right-bar-info {
    text-align: left;
    /*width: 100%;*/
    padding-left: 28%;
}

/* 收起右侧 */
.fromRight {
    animation: fr 2000ms;
    -moz-animation: fr 2000ms;
    /* Firefox */
    -webkit-animation: fr 2000ms;
    /* Safari 和 Chrome */
    -o-animation: fr 2000ms;
    /* Opera */
}

@keyframes fr {
    from {
        right: -20%;
    }

    to {
        right: 0;
    }
}

@-moz-keyframes fr

/* Firefox */
    {
    from {
        right: -20%;
    }

    to {
        right: 0;
    }
}

@-webkit-keyframes fr

/* Safari 和 Chrome */
    {
    from {
        right: -20%;
    }

    to {
        right: 0;
    }
}

@-o-keyframes fr

/* Opera */
    {
    from {
        right: -20%;
    }

    to {
        right: 0;
    }
}

#iframe-map {
    width: 100%;
    height: 100%;
    z-index: 1;
}
</style>